import 'package:flutter/material.dart';
import 'package:loxen/mode/inspiration/category_mode.dart';
import 'package:loxen/mode/inspiration/sub_category.dart';
import 'package:loxen/viewmode/material_category_viewmodel.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MaterialTabBar extends StatefulWidget {
  @override
  _MaterialTabBarState createState() => _MaterialTabBarState();
}

class _MaterialTabBarState extends State<MaterialTabBar>
    with TickerProviderStateMixin {
  TabController controller;
  List<Category> data;

  @override
  void initState() {
    data = Provider.of<MaterialCategoryViewModel>(context, listen: false)
        .categoryBean
        .data
        .results;
    controller = TabController(length: data?.length ?? 0, vsync: this);
    controller.index =
        Provider.of<MaterialCategoryViewModel>(context, listen: false)
            .currentCategory;
    controller.addListener(() {
      Provider.of<MaterialCategoryViewModel>(context, listen: false)
          .changeCategory(controller.index);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: controller,
      isScrollable: true,
      indicator: const BoxDecoration(
        border: Border(bottom: BorderSide(color: Color(0xFF0CABCB), width: 3)),
      ),
      indicatorSize: TabBarIndicatorSize.label,
      labelPadding: EdgeInsets.only(right: 20.w, left: 20.w),
      labelColor: Colors.black,
      labelStyle: TextStyle(
        fontSize: 34.sp,
        fontWeight: FontWeight.bold,
      ),
      unselectedLabelColor: Colors.grey,
      unselectedLabelStyle: TextStyle(fontSize: 31.sp, color: Colors.white),
      tabs: data.map<Widget>((Category tab) {
        return Tab(
          text: tab.name,
        );
      }).toList(),
    );
  }
}

class MaterialTabBar2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Selector<MaterialCategoryViewModel, List<SubCategory>>(
        builder: (_, value, __) {
      if (value != null) {
        return Container(
          height: 40.h,
          width: double.infinity,
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: value.length,
              itemBuilder: (context, index) {
                return Selector<MaterialCategoryViewModel, int>(
                  builder: (_, currentIndex, __) {
                    bool select = index == currentIndex;
                    return GestureDetector(
                      onTap: () {
                        Provider.of<MaterialCategoryViewModel>(context,
                                listen: false)
                            .changeCategoryId(index);
                      },
                      child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(4),
                            border: Border.all(
                                color: select
                                    ? Color(0xFF0CABCB)
                                    : Color(0xFF999999),
                                width: 0.5),
                          ),
                          margin: EdgeInsets.only(right: 26.w),
                          padding: EdgeInsets.only(right: 16.w, left: 16.w),
                          alignment: Alignment.center,
                          child: Text(
                            value[index].name,
                            style: TextStyle(
                              color: select
                                  ? Color(0xFF0CABCB)
                                  : Color(0xFF999999),
                              fontSize: 23.sp,
                              fontWeight: FontWeight.w500,
                              height: 1,
                            ),
                          )),
                    );
                  },
                  selector: (_, model) => model.currentCategoryId,
                  shouldRebuild: (old, next) => (old == index || next == index),
                );
              }),
        );
      } else {
        return Container(height: 40.h);
      }
    }, selector: (_, model) {
      if (model.categoryBean != null) {
        return model
            .categoryBean.data.results[model.currentCategory].sub_category;
      }
      return null;
    });
  }
}
